{extend name="template/base_default"}
{block name="header"}
<link rel="stylesheet" href="__CSS__/common.css">
<link rel="stylesheet" href="__CSS__/weui.min.css">
<link rel="stylesheet" href="__CSS__/index.css">
<link rel="stylesheet" href="__CSS__/weuix.min.css"/>
<script src="__JS__/lrz.min.js"></script>
<style>

    .form-head{
        color: white;
        font-size: 16px;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 5px;
        overflow: hidden;
    }
    body{
        background-image:url("__IMG__/bj.png");
        background-repeat:no-repeat;
        background-size:cover;
        text-align: center;
        background-attachment:fixed;
    }
    .idphoto-box {
        height: 86px;
        width: 46%;
        background-color: #ffffff;
        float: left;
        margin-left: 10px;
        border-radius: 5px;
        margin-top: 10px;
        position: relative;
        overflow: hidden;
        background-size: 100% 100%;
    }
    .money{
        width:80px;
        color:white;
    }
    .main-wrap{
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .form-head{
        color: white;
        font-size: 16px;
        background-color: rgba(95, 110, 170, 0.4);
        border-radius: 5px;
        overflow: hidden;
        color:white;
    }
    body{
        background-image:url("__IMG__/bj.png");
        background-repeat:no-repeat;
        background-size:cover;
        text-align: center;
        background-attachment:fixed;
    }
    .body-input{
        color: #dddddd;
        position: relative;
        outline: none;
        border: solid 1px #ffffff;
        background-color: rgba(95, 110, 170, 0.4);
        float: left;
        margin: auto;
        font-size: 16px;
        height: 41px;
        line-height: 41px;
        border-radius: 5px;
        width: 60%;
        font-family: "Microsoft YaHei UI";
    }
    .bottom-btn{
        width:50%;
        height:100%;
        float: left;
    }
    button{
        border: none;
        color:white;
    }
    .botton1{
        background-color: #FF0000;

    }
    .botton2{
        background-color: #131a34;
        width:100%;
    }
    .input-window{
        margin-left: auto;
        margin-right: auto;
        background-color: white;
        width:90%;
        height:150px;
        background-color: rgba(95, 110, 170, 0.4);
        border-radius: 10px;
        margin-top: 30px;
        margin-left: 20px;
        text-align: center;
        clear:both;
        position: relative;
    }
    .aa{
        height:3px;
        background-color: white;
        width:40px;
        position:absolute;
        top: 30px;
        left:55px;
    }
    .bb{

        opacity: 0;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        z-index:9999;
        width:300px;
        position:absolute;
        top:0;
        left:0;
        height:140px;
    }
    li{
        list-style:none;
    }
    .store-box{

        height:90px;
        margin-top: 30px;
        width: 90%;
        color:#545454;
    }
    .store-box img {
        width:100px;
        height:100px;
        float:right;
        margin-right: 10px;
        margin-top: 10px;
    }
    .store-success{
        font-size: 18px;
        color:#545454;
        font-family: "Microsoft YaHei UI";
    }
    .store-text{
        float: left;
        margin-top: 30px;
        margin-left: 16px;
        text-align: left;
    }
    .store-detail{
        font-size: 14px;
        color:#8c8c8c;
        font-family: "Microsoft YaHei UI";
        margin-top: 12px;
    }
    .store-p{
        text-align: center;
        color:white;
        margin-top: 30px;
        font-family: "Microsoft YaHei UI";
        font-size: 18px;
    }
    .store-other {
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        height:80px;
        background-color: rgba(95, 110, 170, 0.4);
        border-radius: 10px;
        width:90%;
        margin-left: 20px;
        margin-top: 20px;
        float: left;
        line-height: 80px;
        text-align: center;

    }
    .store-other2 {
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        height:80px;
        background-color: white;
        border-radius: 10px;
        width:40%;
        margin-left: 20px;
        margin-top: 20px;
        float: left;
        line-height: 80px;
        text-align: center;
    }
    .form-head2{
        color: white;
        font-size: 16px;
        background-color: rgba(95, 110, 170, 0.4);
        border-radius: 5px;
        overflow: hidden;
        height:420px;
        float: left;
        width:100%;
        margin-top: 20px;
    }
    .store-other-img{
        width:50px;
        float: left;
        height:50px;
        margin-top: 14px;
        margin-left: 14px;
        border-radius: 10px;
    }
    .form-head2 input{
        width:10%;
        height:20px;
        line-height: 30px;
        margin-top: 20px;
        margin-left: 40px;
    }
    .bank{
        width:100%;
        height:50px;
        line-height: 30px;
        text-align: left;
        font-size: 16px;
        margin-left: 30px;
    }
    .form-input3{
        height:42px;
    }
    .form-head{
        color: white;
        font-size: 16px;
        background-color: rgba(95, 110, 170, 0.4);
        border-radius: 5px;
        overflow: hidden;
        color:white;
        height:160px;
    }
    body{
        background-image:url("__IMG__/bj.png");
        background-size:cover;
        text-align: center;
        background-attachment:fixed;
    }
    .body-input{
        color: #dddddd;
        position: relative;
        outline: none;
        border: solid 1px #ffffff;
        background-color: rgba(255, 255, 255, 0);
        float: left;
        margin: auto;
        font-size: 16px;
        height: 41px;
        line-height: 41px;
        border-radius: 5px;
        width: 60%;
        font-family: "Microsoft YaHei UI";
    }
    .bottom-btn{
        width:50%;
        height:100%;
        float: left;
    }
    button{
        border: none;
        color:white;
    }
    .botton1{
        background-color: #FF0000;

    }
    .botton2{
        background-color: #131a34;
        width:100%;
    }
    .input-window{
        margin-left: auto;
        margin-right: auto;
        background-color: white;
        width:90%;
        height:150px;
        background-color: rgba(95, 110, 170, 0.4);
        border-radius: 10px;
        margin-top: 30px;
        margin-left: 20px;
        text-align: center;
        clear:both;
        position: relative;
    }
    .aa{
        height:3px;
        background-color: white;
        width:40px;
        position:absolute;
        top: 30px;
        left:55px;
    }
    .bb{

        opacity: 0;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        z-index:9999;
        width:300px;
        position:absolute;
        top:0;
        left:0;
        height:140px;
    }
    li{
        list-style:none;
    }
    .store-box{

        height:90px;
        margin-top: 30px;
        width: 90%;
        color:#545454;
    }
    .form-input3-label{
        width:30%;
    }
    .store-box img {
        width:100px;
        height:100px;
        float:right;
        margin-right: 10px;
        margin-top: 10px;
    }
    .store-success{
        font-size: 18px;
        color:#545454;

        font-family: "Microsoft YaHei UI";
    }
    .store-text{
        float: left;
        margin-top: 30px;
        margin-left: 16px;
        text-align: left;

    }
    .store-detail{
        font-size: 14px;
        color:#8c8c8c;
        font-family: "Microsoft YaHei UI";
        margin-top: 12px;
    }
    .store-p{
        text-align: center;
        color:white;
        margin-top: 30px;
        font-family: "Microsoft YaHei UI";
        font-size: 18px;

    }
    .store-other {
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        height:80px;
        background-color: rgba(95, 110, 170, 0.4);
        border-radius: 10px;
        width:26%;
        margin-left: 20px;
        margin-top: 20px;
        color：white;
        float: left;
        line-height: 80px;
        text-align: center;
        color: white;


    }
    .store-other input{
        margin-right: 5px;
    }
    .store-other2 {
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto;
        height:80px;
        background-color: white;
        border-radius: 10px;
        width:40%;
        margin-left: 20px;
        margin-top: 20px;

        float: left;
        line-height: 80px;
        text-align: center;
    }
    .form-head2{
        color: white;
        font-size: 16px;
        background-color: rgba(95, 110, 170, 0.4);
        border-radius: 5px;
        overflow: hidden;
        height:480px;
        float: left;
        width:100%;
        margin-top: 20px;
    }
    .store-other-img{
        width:50px;
        float: left;
        height:50px;
        margin-top: 14px;
        margin-left: 14px;
        border-radius: 10px;
    }
    .form-head2 input{
        width:10%;
        height:20px;
        line-height: 30px;


    }
    .bank{
        width:100%;
        height:50px;
        line-height: 30px;
        text-align: left;
        font-size: 16px;
        margin-left: 30px;
    }
    .form-input3-input{
        width:54%;
        height:32px;
        margin-top: 10px;
        line-height: 24px;
        padding: 5px;
    }
    .form-input3{
        height:42px;
    }
    .chexiantext{
        width:25%;
        height:30px;
        text-align: left;
        float:left;
        padding-bottom: 10px;
        margin-top: 10px;

    }
    .textlabel{
        line-height: 30px;
        width:78%;
        margin-top: 10px;
    }
</style>
{/block}
{block name="body"}
<div class="main-wrap">
<form action="{:url('login/register')}" method="post" style="width:95%;margin: auto">
    <div class="form-head">
        <div class="form-input3" >
            <label for="name" class="form-input3-label">车主姓名:</label>
            <input class="form-input3-input" id="name" name="name" type="text" value="" placeholder=" ">
        </div>
        <div class="form-input3">
            <label for="sex" class="form-input3-label">车牌号码:</label>
            <input class="form-input3-input" name="number" id="number" type="text" value="">
        </div>
        <div class="form-input3">
            <label for="name" class="form-input3-label">手机号码:</label>
            <input class="form-input3-input" id="phone" name="phone" type="text" value="" placeholder="">
        </div>


    </div>
    <div class="form-body">
        <div class="input-window" style="background-size:cover;width:80%;margin-left:auto;margin-right:auto;">
            <img style="margin-top: 30px;height:30px;width:30px;margin-left: auto;margin-right: auto;margin-left: 2%" src="__IMG__/jia.png">
            <p style="color:white">上传身份证正面</p>
            <input class="bb headimgurl" style="width:100%" type="file" accept="image/jpg,image/jpeg,image/png,image/gif"   />
            <input  type="hidden" value="11" id="id_front"/>
        </div>
        <div class="input-window" style="background-size:cover;width:80%;margin-left:auto;margin-right:auto;">
            <img style="margin-top: 30px;height:30px;width:30px;margin-left: auto;margin-right: auto;margin-left: 2%" src="__IMG__/jia.png">
            <p style="color:white">上传身份证返面</p>
            <input class="bb headimgurl" style="width:100%" type="file" accept="image/jpg,image/jpeg,image/png,image/gif"   />
            <input  type="hidden"  value="11" id="id_back"/>
        </div>
        <div class="input-window" style="background-size:cover;width:80%;margin-left:auto;margin-right:auto;">
            <img style="margin-top: 30px;height:30px;width:30px;margin-left: auto;margin-right: auto;margin-left: 2%" src="__IMG__/jia.png">
            <p style="color:white">上传行驶证正面</p>
            <input class="bb headimgurl" style="background-size:cover;width:100%" type="file" accept="image/jpg,image/jpeg,image/png,image/gif"   />
            <input  type="hidden"   value="11" id="driving_license_front"/>
        </div>
        <div class="input-window" style="background-size:cover;width:80%;margin-left:auto;margin-right:auto;">
            <img style="margin-top: 30px;height:30px;width:30px;margin-left: auto;margin-right: auto;margin-left: 2%" src="__IMG__/jia.png">
            <p style="color:white">上传行驶证反面</p>
            <input class="bb headimgurl" style="width:100%" type="file" accept="image/jpg,image/jpeg,image/png,image/gif"   />
            <input  type="hidden"   value="11" id="driving_license_back"/>
        </div>
        <div class="input-window" style="background-size:cover;width:80%;margin-left:auto;margin-right:auto;">
            <img style="margin-top: 30px;height:30px;width:30px;margin-left: auto;margin-right: auto;margin-left: 2%" src="__IMG__/jia.png">
            <p style="color:white">上传年检照片</p>
            <input class="bb headimgurl" style="width:100%" type="file" accept="image/jpg,image/jpeg,image/png,image/gif"   />
            <input  type="hidden"   value="11"id="annual_survey"/>
        </div>
        <div class="input-window" style="background-size:cover;width:80%;margin-left:auto;margin-right:auto;">
            <img style="margin-top: 30px;height:30px;width:30px;margin-left: auto;margin-right: auto;margin-left: 2%" src="__IMG__/jia.png">
            <p style="color:white">上传历史车险</p>
            <input class="bb headimgurl" style="width:100%" type="file" accept="image/jpg,image/jpeg,image/png,image/gif"   />
            <input  type="hidden"   value="11"id="his_insurance"/>
        </div>

        <label for="ali" class="store-other">
            <input id="zero" checked="checked" name="first_offer" value="50万" type="radio">50万
        </label>
        <label for="ali" class="store-other">
            <input id="ali"  name="first_offer" value="100万" type="radio">100万
        </label>

        <label for="weixin" class="store-other">
            <input id="weixin"  name="first_offer" value="150万" type="radio">150万
        </label>
    </div>
    <div style="background-color: rgba(95, 110, 170, 0.4);padding-top:10px;padding-left:40px;float:left;text-align:left;margin-left: 5%;width:90%;padding-bottom: 10px;margin-top: 20px">
        <label class="textlabel"><input class="chexiantext" name="chexian" type="checkbox" value="机动车损失保险"/><div style="width:60%;float: left;color:white;margin-top: 10px;font-size: 12px">机动车损失保险</div></label>
        <label class="textlabel"><input class="chexiantext" name="chexian" type="checkbox" value="机动车损失保险"/><div style="width:60%;float: left;color:white;margin-top: 10px;font-size: 12px">不计免赔险</div></label>
        <label class="textlabel"><input class="chexiantext" name="chexian" type="checkbox" value="机动车损失保险"/><div style="width:60%;float: left;color:white;margin-top: 10px;font-size: 12px">机动车车身划痕险</div></label>
        <label class="textlabel"><input class="chexiantext" name="chexian" type="checkbox" value="车上人员险"/><div style="width:60%;float: left;color:white;margin-top: 10px;font-size: 12px">车上人员险</div></label>
       <label class="textlabel"><input class="chexiantext" name="chexian" type="checkbox" value="机动车全车盗抢险"/><div style="width:60%;float: left;color:white;margin-top: 10px;font-size: 12px">机动车全车盗抢险</div></label>
       <label class="textlabel"><input class="chexiantext" name="chexian" type="checkbox" value="玻璃单独破碎险"/><div style="width:60%;float: left;color:white;margin-top: 10px;font-size: 12px">玻璃单独破碎险</div></label>
       <label class="textlabel"><input class="chexiantext" name="chexian" type="checkbox" value="自燃损失险"/><div style="width:60%;float: left;margin-top: 10px;color:white;font-size: 12px">自燃损失险</div></label>
        <label class="textlabel"><input class="chexiantext" name="chexian" type="checkbox" value="发动机涉水损失险"/><div style="width:60%;float: left;margin-top: 10px;color:white;font-size: 12px">发动机涉水损失险（两年以内可承保）</div></label>
        <label class="textlabel"><input class="chexiantext" name="chexian" type="checkbox" value="机动车损失保险无法找到第三方特约险"/><div style="width:60%;float: left;margin-top: 10px;color:white;font-size: 12px">机动车损失保险无法找到第三方特约险（三年以内可承保）</div></label>
    </div>
    <div class="form-input">
        <button id="submit"  style="width: 60%" class="login-btn2" type="button">提交</button>
    </div>

</form>
</div>
<script type="text/javascript" src="__JS__/zepto.min.js"></script>
<script type="text/javascript" src="__JS__/public.js"></script>
<script>
    $(function(){

        $('.headimgurl').change(function () {
            var v_this = $(this);
            lrz(this.files[0],{width:640,fieldName:"image"}).then(function (rst) {
                var formdata = new FormData();
                v_this.parent().css("background-image","url("+rst.base64+")");//无论是否上传成功都显示
                url = getBaseUrl()+"web.php/file/upload_picture_base64";
                formdata.append("image", rst.base64);
                $.ajax({
                    url : url,
                    type : 'post',
                    data : formdata,
                    contentType : false,
                    processData : false,
                    dataType : "json",
                    success : function(data) {
                        if (data.status == true) {
                            $.toast("图片上传成功");
                            v_this.next().val(data.info[0]['id']);
                        }
                    },
                    error:function(){
                        $.toast("图片上传失败");
                    }
                });
                return false;
            })
        });
    })


    $('#submit').click(function () {
        var chexian = '';
        $('input[name="chexian"]:checked').each(function(){
            chexian += ','+$(this).val();
        });
        var $name = $('#name');
        var $number = $('#number');
        var $phone = $('#phone');
        if(!$phone.val()||isNaN($phone.val())||$phone.val().length != 11){
            $.toast("输入11位手机号",'cancel');
        }else if(!$name.val()){
            $.toast("请输入车主姓名",'cancel');
        }else{

            console.log(chexian);
            var body  ={
                mobile:$phone.val(),
                car_code:$number.val(),
                name:$name.val(),
                id_front:$('#id_front').val(),
                id_back:$('#id_back').val(),
                driving_license_front:$('#driving_license_front').val(),
                driving_license_back:$('#driving_license_back').val(),
                annual_survey:$('#annual_survey').val(),
                his_insurance:$('#his_insurance').val(),
                three_respons_insurance:$('input[name="first_offer"]:checked').val()+chexian
            };
            var $this = $(this);
            $this.addClass('weui-btn_disabled').attr('disabled','disabled');
            ajax_post(getBaseUrl()+'web.php/insurance/addcx',jQuery.param(body),{
                success:function(data){
                    $.toast("申请成功 请耐心等待结果",'success');
                    $this.removeClass('weui-btn_disabled').removeAttr("disabled");
                    setTimeout(
                          function(){
                               window.location.href=getBaseUrl()+'web.php/user/protocalorder';
                           }
                           ,1500);
                },
                error:function(data){
                    $.toptip('申请失败', 'error');
                    $this.removeClass('weui-btn_disabled').removeAttr("disabled");
                }
            })
        }

    });
</script>
{/block}
{block name="footer"}

{/block}